<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人博客信息管理平台</title>
  <link rel="stylesheet" href="./CSS/RootManagePage.css">
</head>
<body>
<div class="TopBlock">
  <h1>个人博客信息管理平台</h1>
</div>
<div>
  <table class="UserInformationTable">
    <tr class="UserInformationTr">
      <th>用户ID</th>
      <th>用户名</th>
      <th>用户密码</th>
      <th>用户邮箱</th>
      <th>用户电话号码</th>
      <th>用户身份证号</th>
      <th>用户信息条创建时间</th>
      <th>用户信息条更改时间</th>
    </tr>
    <tr class="UserInformationTr">
      <td>1</td>
      <td>zhao</td>
      <td>Zhao2001@</td>
      <td>2580927395@qq.com</td>
      <td>13044347476</td>
      <td>220303200109202611</td>
      <td>2024-9-20 10:30</td>
      <td>2024-9-30 15:30</td>
    </tr>
  </table>
</div>
<div class="countTools">
  <button class="NumberAction" onclick="decreasePage()">←</button>
  <span class="NumberSpan" id="page">1</span><span>页</span>
  <span>/</span>
  <span class="NumberSpan">4</span><span>条</span>
  <button class="NumberAction" onclick="increasePage()">→</button>
</div>
<div>
  <button class="action" onclick="showModal()">更改信息</button>
  <button class="action" id="delete-btn">信息删除</button>
  <button class="action" id="sort-btn">信息排序</button>
  <button class="action" id="paginate-btn">信息分页查找</button>
</div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="hideModal()">&times;</span>
    <p>请选择操作：</p>
    <label for="rowIndex">选择行号:</label>
    <select id="rowIndex">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <label for="username">用户名:</label>
    <input type="text" id="username" placeholder="用户名">
    <label for="password">用户密码:</label>
    <input type="text" id="password" placeholder="用户密码">
    <label for="email">电子邮箱:</label>
    <input type="email" id="email" placeholder="电子邮箱">
    <label for="phonenumber">电话号码:</label>
    <input type="text" id="phonenumber" placeholder="电话号码">
    <label for="Idcard">身份证号:</label>
    <input type="text" id="Idcard" placeholder="身份证号">
    <button class="btn" onclick="updateRow()">更新</button>
  </div>
</div>
<div class="chart-container">
  <canvas id="visitChart"></canvas>
</div>
<script>
  // 假设以下数据是从服务器获取的，时间可以按照你的需求格式化
  const visitData = {
    labels: ["2024-09-01", "2024-09-02", "2024-09-03", "2024-09-04", "2024-09-05"], // 时间
    datasets: [{
      label: '访问量',
      data: [50, 75, 100, 125, 150], // 访问量
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  };

  const ctx = document.getElementById('visitChart').getContext('2d');
  const visitChart = new Chart(ctx, {
    type: 'line',
    data: visitData,
    options: {
      scales: {
        x: {
          type: 'time',
          time: {
            unit: 'day' // 根据需要调整时间单位
          }
        },
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>
<!--      <div id="delete-popup" class="popup">-->
<!--        <div class="popup-content">-->
<!--            <span class="close">&times;</span>-->
<!--            <p>Are you sure you want to delete this record?</p>-->
<!--            <button id="confirm-delete">Delete</button>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div id="sort-popup" class="popup">-->
<!--      <div class="popup-content">-->
<!--          <span class="close">&times;</span>-->
<!--          <p>Sort by ID in ascending order?</p>-->
<!--          <button id="confirm-sort">Sort</button>-->
<!--      </div>-->
<!--  </div>-->
<!--  <div id="paginate-popup" class="popup">-->
<!--    <div class="popup-content">-->
<!--        <span class="close">&times;</span>-->
<!--        <p>Enter page number and number of records per page:</p>-->
<!--        <input type="number" id="page-num" placeholder="Page Number">-->
<!--        <input type="number" id="records-per-page" placeholder="Records Per Page">-->
<!--        <button id="confirm-paginate">Paginate</button>-->
<!--    </div>-->
<!--</div>-->
<script src="./JS/RootManagePage.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>
